ㄧ、前言
物件（Object）是 JavaScript 的核心概念之一。不僅是資料的容器，更是建構複雜應用程式的重要基礎。本文將從基礎觀念出發，逐步深入探討 JavaScript 物件的建立方式、屬性操作，以及常見的設計模式。
二、基本觀念
在 JavaScript 中，物件由一系列的「鍵-值」（key-value）配對組成，每一個鍵值對稱為「屬性」（property）。屬性的值可以是任何資料型態，包括數字、字串、陣列，甚至是另一個物件或函式。
三、基本範例
以下是一個簡單的物件範例：
var person = {
firstName: "Leo",
lastName: "Shiang",
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
console.log(person.fullName()); // Leo Shiang
四、建立物件的方法
4.1 物件字面量 (Object Literal)
最簡單且常用的方式。
var book = {
title: 'Beauty of JavaScript',
isbn: '978-986-347-859-1',
price: 400,
displayTitle: function() {
console.log(this.title);
}
};
book.displayTitle(); // Beauty of JavaScript
4.2 使用建構式 (Constructor)
使用 new Object() 建立物件，然後逐一加入屬性和方法。
var book = new Object();
book.title = 'Beauty of JavaScript';
book.isbn = '978-986-347-859-1';
book.price = 400;
book.displayTitle = function() {
console.log(this.title);
};
book.displayTitle(); // Beauty of JavaScript
4.3 建構函式 (Constructor Function)
透過自訂建構函式建立具有共同屬性及方法的物件。
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.fullName = function() {
return this.firstName + " " + this.lastName;
};
}
var me = new Person("Leo", "Shiang");
console.log(me.fullName()); // Leo Shiang
4.4 使用 Object.create()
這種方式允許指定原型。
無原型範例
var person = Object.create(null);
person.name = "Leo";
console.log(typeof person); // object
console.log(person.prototype); // undefined
有原型範例
var prototypeObject = {
fullName: function() {
return this.firstName + ' ' + this.lastName;
}
};
var person = Object.create(prototypeObject);
person.firstName = 'Leo';
person.lastName = 'Shiang';
console.log(person.fullName()); // Leo Shiang
4.5 工廠模式 (Factory Pattern)
透過函式建立並回傳新物件。
function createBook(title, isbn, price) {
var book = new Object();
book.title = title;
book.isbn = isbn;
book.price = price;
book.displayTitle = function() {
console.log(this.title);
};
return book;
}
var book = createBook('Beauty of JavaScript', '978-986-347-859-1', 400);
book.displayTitle(); // Beauty of JavaScript
五、操作物件屬性
5.1 屬性存取方式
點記法 (dot notation)
person.firstName;
person.fullName();
中括號記法 (bracket notation)
適用於鍵名為特殊字元或變數。
var person = {};
person["weight"] = 80;
var key = "firstName";
person[key] = "Leo";
5.2 刪除屬性
使用 delete。
delete person.firstName;
5.3 列舉物件屬性
Object.keys()：回傳物件自身可列舉屬性。
console.log(Object.keys(person));
for...in迴圈：遍歷物件與原型鏈可列舉屬性。
for (var property in person) {
console.log(property);
}
Object.getOwnPropertyNames()：回傳物件自身所有屬性（含不可列舉）。
console.log(Object.getOwnPropertyNames(person));
六、設計模式：原型模式 (Prototype Pattern)
6.1 核心概念
在 JavaScript 中，每個函式都有 prototype 屬性，包含可被實例共享的屬性和方法。
範例
function Book() {}
Book.prototype.title = 'Beauty of JavaScript';
Book.prototype.displayTitle = function () {
console.log(this.title);
};
var book1 = new Book();
var book2 = new Book();
book1.displayTitle(); // Beauty of JavaScript
console.log(book1.displayTitle === book2.displayTitle); // true
6.2 結合建構函式與原型模式
建構函式：定義每個實例獨有的屬性。
原型模式：定義共享的方法和屬性。
function Task(name, start, end) {
this.name = name;
this.start = new Date(start);
this.end = new Date(end);
this.subTasks = [];
}
Task.prototype.getDuration = function() {
return this.end - this.start;
};
var task1 = new Task('需求訪談', '2018-10-23', '2018-10-30');
var task2 = new Task('系統設計', '2018-11-01', '2018-11-12');
console.log(task1.getDuration === task2.getDuration); // true
七、結論
從物件字面量到原型繼承，JavaScript 提供豐富多樣的物件操作方式。掌握這些方法與設計模式，將有助於提升你的 JavaScript 開發能力。